<template>
  <div class="content">
    <van-cell title="文档管理" is-link to="/docmanage" />
    <van-cell title="路由跳转" is-link to="/home" />
    <van-cell
      title="清除缓存"
      @click="methods.clearSession"
      :value="data.sessionSize"
      is-link
    />
  </div>
</template>
<script>
import { reactive, onBeforeMount } from 'vue'
import { showToast } from 'vant'
export default {
  setup() {
    const data = reactive({
      sessionSize: '',
    })
    function getUseSize() {
      var size = 0
      for (let item in window.sessionStorage) {
        if (Object.prototype.hasOwnProperty.call(window.sessionStorage, item)) {
          size += window.sessionStorage.getItem(item).length
        }
      }
      data.sessionSize = (size / 1024).toFixed(2) + 'KB'
    }
    function clearSession() {
      window.sessionStorage.clear()
      getUseSize()
      showToast('清除成功')
    }
    onBeforeMount(async () => {
      getUseSize()
    })
    return {
      data,
      methods: {
        clearSession,
      },
    }
  },
}
</script>
<style lang="scss">
.content {
  padding: 15px 0;
}
</style>
